'use strict';  /*eslint comma-spacing: 0, no-unused-vars: 0 */ /*global earcut:false */
/**
 * 用网页做图片标注的逻辑是 有一个底图（矢量图，svg），在矢量图上加上坐标的点或者圆
 * 1、从html中取出svg的标签，通过js取出需要标注的多边形区域
 * 2、利用算法在多边形中随机生成多边形内点的坐标
 * 3、将这些点标注（添加到svg）中
 * 
 */

// ======================================== 找到svg图

// 方法1  ： 直接加载是不行的，因为有时候不能真正获取svg信息
// picture.js:15 Uncaught TypeError: svgDoc.documentElement.getElementById is not a function
// var svg = document.getElementById('svg');
// console.log("svg : ",svg);
// var svgDoc = svg.contentDocument;
// console.log("svgDoc : ",svgDoc);
// var polygon = svgDoc.documentElement.getElementById("path3713").attributes[12].nodeValue;
// var polygon = svgDoc.getElementById("path3713").attributes[12].nodeValue;

// console.log("polygon ： ", polygon);

// 方法2   ： 通过一步的方法获得
// var url="https://openclipart.org/people/StudioFibonacci/kitchen-blender.svg";
// fetch('https://cors-anywhere.herokuapp.com/'+url)
var url="http://localhost:8080/test1/polygon.svg";
fetch(url)
	.then(r=>r.blob())
  .then(b=>{
	  svg_image_id.addEventListener('load', e => URL.revokeObjectURL(svg_image_id.data));
  	svg_image_id.data = URL.createObjectURL(b);
  });

svg_image_id.onload = e =>{
    // var pointsInfo =  svg_image_id.contentDocument.getElementById("path3713").attributes[12].nodeValue;
    // var points = getPoints(pointsInfo);
    // console.log(points);
    // console.log("tt",svg_image_id.contentDocument.getElementById("path3713").attributes[12].nodeValue);
  // svg_image_id.contentDocument.getElementById("path3713").style.fill="green"
  /**
   * 原理是创建一个节点，
   * 然后把这个节点通过appendChild 添加进去
   */
  // var textnode = document.createTextNode("test");
  // svg_image_id.contentDocument.getElementById("layer1").appendChild(textnode);
  // console.log(svg_image_id);

  /**
   * 创建一个svg元素
   */
  var pointNode = document.createElementNS('http://www.w3.org/2000/svg','circle');
  pointNode.setAttribute('cx','100');
  pointNode.setAttribute('cy','50');
  pointNode.r.baseVal.value = 50;
  pointNode.setAttribute('stroke-width','10');
  pointNode.setAttribute('fill','green');
  svg_image_id.contentDocument.getElementById("layer1").appendChild(pointNode);
  console.log(svg_image_id)
}

function getPoints (svgPath) {
    var tmp = new Array();
    tmp = svgPath.split(' ');
    tmp.shift();tmp.pop();
    // console.log(tmp);

    var result = new Array();
    for (let i=0;i<tmp.length;i++){
      var cood = tmp[i].split(',');
      var x = parseFloat(cood[0]);
      var y = parseFloat(cood[1]);
      result.push(x);
      result.push(y);
    }
    return result;
}







